import { defineComponent } from 'vue'
import pageStyle from './styles/macHeader.module.scss'
export default defineComponent({
  props: {
    title: String,
    isFullscreen: Boolean,
    showFull: {
      type: Boolean,
      default: true
    },
    showDesc: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },
  emits: ['toggle', 'desc', 'close'],
  setup(props, { emit }) {
    return () => (
      <>
        <div class={`${pageStyle.header}`}>
          <div class='tool'></div>
          <div class='title u-line-1'>{props.title}</div>
          <div class='tool flex justify-end'>
            {props.showFull && (
              <div
                class='full btn press-down'
                title={props.isFullscreen ? '退出全屏' : '全屏'}
                onClick={() => emit('toggle')}
              >
                <i
                  class={`esayIcon ${
                    props.isFullscreen
                      ? 'esayIcon-tuichuquanping'
                      : 'esayIcon-quanping'
                  }`}
                ></i>
              </div>
            )}
            {props.showDesc && (
              <div
                class='question btn ml-[10px] press-down'
                onClick={() => emit('desc')}
              >
                <i class='esayIcon esayIcon-shuyi_shuoming'></i>
              </div>
            )}
            {props.showClose && (
              <div
                class='close btn ml-[10px] press-down'
                onClick={() => emit('close')}
              >
                <i class='esayIcon esayIcon-guanbi'></i>
              </div>
            )}
          </div>
        </div>
      </>
    )
  }
})
